<template>
  <view class="nanny-item" >
    <!-- 左侧头像 -->
    <img
        class="avatar"
        :src="row.avatarUrl"
        mode="aspectFill"
    />
    <!-- 中间信息 -->
    <view class="info">
      <view class="name-age">
        <text class="name">{{ row.talentName }}</text>
        <text class="gender">{{ row.talentGender === '1' ? '男':'女' }}</text>
        <text class="age">{{ row.talentAge }}</text>
      </view>
      <view class="work-scope">
        工作范围：{{ row.talentWorkScope }}
      </view>
      <view class="work-scope">
        <span>
          联系方式：{{ row.talentPhone }}
        </span>
        <van-button
            size="small"
            type="primary"
            round
            class="book-btn"
            style="color: #ffffff"
            @click="submit"
        >咨询
        </van-button>
      </view>
    </view>
    <view class="points">{{ row.itemScore }}积分</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props:{
    row:{
      type:Object,
      default:()=>({})
    }
  },
  methods:{
    submit(){
      this.$toPage(`/pages/consult/consultIm?receiver=${this.row.talentPhone}`)
    }
  }
}
</script>

<style lang="scss" scoped>

.nanny-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  background-color:$uni-color-success;
  border-radius: 8px;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  // 头像样式
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-right: 16px;
  }

  // 中间信息区域
  .info {
    flex: 1;

    .name-age {
      margin-bottom: 8px;

      .name {
        font-size: 16px;
        font-weight: bold;
        color: $uni-color-primary;
        margin-right: 8px;
      }

      .gender {
        font-size: 14px;
        color: #333333;
        margin-right: 10px;
        position: relative;
        &:after{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right:-5px;
          width: 1px;
          height: 12px;
          content: ' ';
          background: #333333;
          font-weight: bold;
        }
      }

      .age {
        font-size: 14px;
        color: #333333;
      }
    }

    .work-scope {
      font-size: 14px;
      color: #333333;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .points {
    font-size: 14px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 0 8px 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    background: #66c2ff;
    color: #F8E4A7;
  }

  .right {
    float: right;
    margin-top: 10px;
  }
}
</style>
